<template>
  <div class="user">
    <the-header></the-header>

    <!-- <scroll class="content"> -->
      <div class="user-nav">
        <img :src="imageUrl" alt="">
        <div class="user-login" @click="loginUser">
          <div class="user-login-title">
            <span>{{ loginTxt }}</span>
          </div>
          <div class="user-info" v-if="isLogin">
            <span>{{ follows }} 关注 | </span>
            <span>{{ followeds }} 粉丝 | </span>
            <span>Lv.{{ level }}</span>
          </div>
        </div>
      </div>

      <div class="user-icon">
        <the-icon iconColor="#FC3B34" textColor="#666666" fontSize="12px" :data="userIconTop"></the-icon>
        <the-icon iconColor="#FC3B34" textColor="#666666" fontSize="12px" :data="userIconBottom"></the-icon>
      </div>

      <div class="my-love-song">
        <div class="love-img" :style="{backgroundColor:backgroundColor}">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-chuangyikongjianICON_fuzhi-" />
          </svg>
        </div>

        <div class="love-msg">
          <span class="love-title">我喜欢的音乐</span>
          <span>{{ collection }}首</span>
        </div>
      </div>

      <div class="user-section-title">
        <div v-for="(item,index) in titles" :key="index"
          :class="{active:index === currentIndex}"
          @click="itemClick(index)">
          <span>{{ item }}</span>
        </div>
      </div>
      <div class="create-songlist">
        <div class="songlist-content-title">
          <div class="create-clist">
            <span>创建歌单({{ loveLength }}个)</span>
            <span @click="createList">
              <svg t="1638330226820" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5821" width="200" height="200"><path d="M469.333333 469.333333V170.666667h85.333334v298.666666h298.666666v85.333334h-298.666666v298.666666h-85.333334v-298.666666H170.666667v-85.333334h298.666666z" fill="#444444" p-id="5822"></path></svg>
            </span>
          </div>
          <div class="create-list" v-for="(item,index) in playlist" :key="index"
            @click="songlistClick(item,index)">
            <div class="create-list-left">
              <div class="create-img">
                <img :src="item.coverImgUrl" alt="">
              </div>
              <div class="create-msg">
                <span class="list-name">{{ item.name }}</span>
                <span class="list-count">{{ item.trackCount }}首</span>
              </div>
            </div>

            <div class="create-list-right" @click.stop="editClick(item)">
              <div class="create-icon" style="font-size:14px">
                <svg t="1638329353956" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5019" width="200" height="200"><path d="M512 814.545455c-39.563636 0-69.818182-30.254545-69.818182-69.818182s30.254545-69.818182 69.818182-69.818182 69.818182 30.254545 69.818182 69.818182-30.254545 69.818182-69.818182 69.818182z m0-232.727273c-39.563636 0-69.818182-30.254545-69.818182-69.818182s30.254545-69.818182 69.818182-69.818182 69.818182 30.254545 69.818182 69.818182-30.254545 69.818182-69.818182 69.818182z m0-232.727273c-39.563636 0-69.818182-30.254545-69.818182-69.818182s30.254545-69.818182 69.818182-69.818182 69.818182 30.254545 69.818182 69.818182-30.254545 69.818182-69.818182 69.818182z" fill="" p-id="5020"></path></svg>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="collection-songlist">
        <div class="songlist-content-title">
          <span>收藏歌单</span>
          <div class="collection-list">
            <span>暂无收藏的歌单</span>
          </div>
        </div>
      </div>
      <div class="assistant-songlist">
        <div class="songlist-content-title">
          <span>歌单助手</span>
        </div>
      </div>
    <!-- </scroll> -->

    <van-popup v-model="show" round position="bottom" :style="{ height: '30%' }">
     <div class="list-popup">
       <div class="list-header" style="display:flex;justify-content:space-between;">
         <span style="padding:10px;" @click="popupCancel">取消</span>
         <span style="padding:10px;" @click="createSongSheet">完成</span>
       </div>

       <div class="list-type" style="text-align:center;padding:10px">歌单名称</div>
       <van-cell-group>
        <van-field v-model="value" placeholder="输入新建歌单标题" ref="txtValue"/>
      </van-cell-group>
     </div> 
    </van-popup>

    <van-popup v-model="editShow" round position="bottom" :style="{ height: '30%' }">
      <div class="s-title" style="padding:20px 0 10px 20px;color:#ccc;font-size:12px;border-bottom:1px solid #000">
        <span>歌单: {{ listName }}</span>
      </div>

      <div class="menu-list" style="display:flex;padding: 7px;">
        <span style="font-size:15px;padding-right:10px">
          <svg t="1638343341169" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6929" width="200" height="200"><path d="M490.666667 644.266667V469.333333h85.333333v174.933334l46.933333-46.933334 59.733334 59.733334-68.266667 68.266666h132.266667c59.733333-8.533333 106.666667-64 106.666666-128 0-72.533333-55.466667-128-128-128-17.066667 0-29.866667 4.266667-42.666666 8.533334V469.333333c0-93.866667-76.8-170.666667-170.666667-170.666666s-170.666667 76.8-170.666667 170.666666c0 17.066667 4.266667 29.866667 4.266667 46.933334-8.533333-4.266667-17.066667-4.266667-25.6-4.266667C260.266667 512 213.333333 558.933333 213.333333 618.666667S260.266667 725.333333 320 725.333333h132.266667L384 657.066667l59.733333-59.733334 46.933334 46.933334z m123.733333 81.066666l-81.066667 81.066667-81.066666-81.066667H405.333333v85.333334h-85.333333C213.333333 810.666667 128 725.333333 128 618.666667c0-85.333333 55.466667-157.866667 128-183.466667C273.066667 311.466667 379.733333 213.333333 512 213.333333c110.933333 0 209.066667 72.533333 243.2 170.666667 102.4 12.8 183.466667 102.4 183.466667 213.333333s-85.333333 200.533333-192 213.333334h-85.333334v-85.333334h-46.933333z" fill="#444444" p-id="6930"></path></svg>
        </span>
        <span style="font-size:13px;padding-top:3px">下载</span>
      </div>
      <div class="menu-list" style="display:flex;padding: 7px;">
        <span style="font-size:12px;padding-right:10px">
          <svg t="1638343789186" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7724" width="200" height="200"><path d="M768.73106 703.537712c-35.606921 0-67.945574 14.793214-91.167479 38.359147l-309.109357-171.670082c9.116748-17.545439 14.621199-37.155048 14.621199-58.312783 0-12.55703-2.408198-24.426004-5.676466-35.950949l304.63699-189.215522c22.705863 20.469679 52.464304 33.198723 85.146985 33.198723 70.525785 0 127.978498-57.452713 127.978498-127.978498S837.708718 63.989249 767.182933 63.989249s-127.978498 57.452713-127.978498 127.978498c0 14.621199 2.92424 28.382328 7.396607 41.455401L344.716278 420.746514c-23.049891-22.705863-54.700487-36.983034-89.791366-36.983034-70.525785 0-127.978498 57.452713-127.978498 127.978498s57.452713 127.978498 127.978498 127.978498c25.630102 0 49.540064-7.740635 69.493701-20.813707l321.150344 178.378633c-3.096254 11.008903-5.160423 22.18982-5.160423 34.058794 0 70.525785 57.452713 127.978498 127.978498 127.978498s127.978498-57.452713 127.978498-127.978498S839.256845 703.537712 768.73106 703.537712zM767.182933 127.978498c35.262893 0 63.989249 28.726356 63.989249 63.989249s-28.726356 63.989249-63.989249 63.989249-63.989249-28.726356-63.989249-63.989249S731.92004 127.978498 767.182933 127.978498zM191.107677 511.913993c0-35.262893 28.726356-63.989249 63.989249-63.989249s63.989249 28.726356 63.989249 63.989249-28.726356 63.989249-63.989249 63.989249S191.107677 547.176886 191.107677 511.913993zM768.73106 895.505459c-35.262893 0-63.989249-28.726356-63.989249-63.989249s28.726356-63.989249 63.989249-63.989249 63.989249 28.726356 63.989249 63.989249C832.720309 866.951117 803.993953 895.505459 768.73106 895.505459z" p-id="7725"></path></svg>
        </span>
        <span style="font-size:13px;padding-top:3px" @click="showShare = true">分享</span>
      </div>
      <div class="menu-list" style="display:flex;padding: 7px;" @click="editGroupList">
        <span style="font-size:12px;padding-right:10px">
          <svg t="1638343847274" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8538" width="200" height="200"><path d="M247.0912 996.1472 100.5568 996.1472c-39.936 0-72.4992-32.5632-72.4992-72.4992L28.0576 81.92c0-39.936 32.5632-72.4992 72.4992-72.4992l766.0544 0c39.936 0 72.4992 32.5632 72.4992 72.4992l0 210.5344c0 12.3904-10.0352 22.528-22.528 22.528s-22.528-10.0352-22.528-22.528L894.0544 81.92c0-15.1552-12.288-27.5456-27.5456-27.5456L100.5568 54.3744c-15.1552 0-27.5456 12.288-27.5456 27.5456L73.0112 923.648c0 15.1552 12.288 27.5456 27.5456 27.5456l146.5344 0c12.3904 0 22.528 10.0352 22.528 22.528S259.4816 996.1472 247.0912 996.1472z" p-id="8539"></path><path d="M745.2672 192.1024 174.6944 192.1024c-12.3904 0-22.528-10.0352-22.528-22.528s10.0352-22.528 22.528-22.528l570.5728 0c12.3904 0 22.528 10.0352 22.528 22.528S757.6576 192.1024 745.2672 192.1024z" p-id="8540"></path><path d="M437.6576 429.6704 174.6944 429.6704c-12.3904 0-22.528-10.0352-22.528-22.528s10.0352-22.528 22.528-22.528l262.9632 0c12.3904 0 22.528 10.0352 22.528 22.528S450.1504 429.6704 437.6576 429.6704z" p-id="8541"></path><path d="M620.6464 310.8864 174.6944 310.8864c-12.3904 0-22.528-10.0352-22.528-22.528s10.0352-22.528 22.528-22.528l445.952 0c12.3904 0 22.528 10.0352 22.528 22.528S633.1392 310.8864 620.6464 310.8864z" p-id="8542"></path><path d="M399.6672 1009.8688c-6.2464 0-12.288-2.56-16.5888-7.2704-5.2224-5.7344-7.168-13.7216-5.12-21.2992l40.8576-146.6368c1.024-3.6864 3.072-7.168 5.7344-9.8304l408.9856-408.9856c14.1312-14.0288 36.9664-14.0288 51.0976 0l97.792 97.792c6.8608 6.8608 10.5472 15.872 10.5472 25.4976s-3.7888 18.7392-10.5472 25.4976L928.8704 618.496c-4.1984 4.1984-9.9328 6.5536-15.872 6.5536s-11.6736-2.3552-15.872-6.5536l-66.048-66.048c-8.8064-8.8064-8.8064-23.04 0-31.8464s23.04-8.8064 31.8464 0l50.176 50.176 31.4368-31.4368L859.136 454.0416 460.6976 852.48 431.104 958.6688 546.7136 936.96l231.7312-231.7312c5.0176-5.4272 50.7904-52.6336 107.2128-56.7296 12.3904-0.9216 23.1424 8.3968 24.064 20.7872 0.9216 12.3904-8.3968 23.1424-20.7872 24.064-40.3456 2.9696-77.4144 42.2912-77.824 42.7008-0.2048 0.2048-0.4096 0.512-0.7168 0.7168L573.5424 973.7216c-3.1744 3.1744-7.2704 5.3248-11.776 6.2464l-158.0032 29.5936C402.432 1009.7664 401.1008 1009.8688 399.6672 1009.8688z" p-id="8543"></path></svg>
        </span>
        <span style="font-size:13px;padding-top:3px">编辑歌单信息</span>
      </div>
      <div class="menu-list" style="display:flex;padding: 7px;" @click="delGroupList">
        <span style="font-size:12px;padding-right:10px">
          <svg t="1638343908300" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9358" width="200" height="200"><path d="M106.666667 213.333333h810.666666v42.666667H106.666667z" fill="#3D3D3D" p-id="9359"></path><path d="M640 128v42.666667h42.666667V128c0-23.573333-19.093333-42.666667-42.538667-42.666667H383.872A42.496 42.496 0 0 0 341.333333 128v42.666667h42.666667V128h256z" fill="#3D3D3D" p-id="9360"></path><path d="M213.333333 896V256H170.666667v639.957333C170.666667 919.552 189.653333 938.666667 213.376 938.666667h597.248C834.218667 938.666667 853.333333 919.68 853.333333 895.957333V256h-42.666666v640H213.333333z" fill="#3D3D3D" p-id="9361"></path><path d="M320 341.333333h42.666667v384h-42.666667zM490.666667 341.333333h42.666666v384h-42.666666zM661.333333 341.333333h42.666667v384h-42.666667z" fill="#3D3D3D" p-id="9362"></path></svg>
        </span>
        <span style="font-size:13px;padding-top:3px">删除</span>
      </div>
    </van-popup>

     <van-share-sheet v-model="showShare" title="立即分享给好友" :options="options" @select="onSelect"/>
  </div>
</template>

<script>
  import Bus from '../../common/js/bus'
  import TheIcon from '../../components/TheIcon/TheIcon.vue'
  import TheHeader from '../../components/TheHeader/TheHeader.vue'
  import createList from './cpns/create-List.vue'
  import { userIconTop,userIconBottom } from '../../assets/js/icon'

  import { getLoginInfo, getUserMusicList, getUserInfo, getRefresh } from '../../api/login'
  import { getCreateList, getDelList } from '../../api/songlist'
  import { Toast,Notify } from 'vant';
  import Scroll from '../../components/Scroll/Scroll.vue'

  export default {
    data() {
      return {
        userIconTop:userIconTop,
        userIconBottom: userIconBottom,
        collection:"0",
        phone:'13907208270',
        password:'ZZF05090406',
        imageUrl:'../../assets/img/user.jpeg',
        loginTxt:'立即登录 >',
        userId:'',
        follows:'',
        followeds:'',
        level:'',
        isLogin:false,
        loveLength:'',
        createListName:'',
        playlist:[],
        backgroundColor: '#fee8e8',
        backgroundImage:'',
        currentIndex:0,
        titles:['创建歌单','收藏歌单','歌单助手'],
        show:false,
        value: '',
        editShow:false,
        listName:'',
        fileId:'',
        coverImage:'',
        singName:'',
        showShare:false,
        options: [
          [
            { name: '微信', icon: 'wechat' },
            { name: '朋友圈', icon: 'wechat-moments' },
            { name: '微博', icon: 'weibo' },
            { name: 'QQ', icon: 'qq' },
          ],
          [
            { name: '复制链接', icon: 'link' },
            { name: '分享海报', icon: 'poster' },
            { name: '二维码', icon: 'qrcode' },
            { name: '小程序码', icon: 'weapp-qrcode' },
          ],
        ],
        itemInfo:'',
      }
    },

    components:{
      TheHeader,
      TheIcon,
      createList,
      Scroll
    },

    created(){
      if(this.$session.getItem('profile') !== null){
        this.loginTxt = this.$session.getItem('profile').nickname;
        this.imageUrl = this.$session.getItem('profile').avatarUrl;
        this.userId = this.$session.getItem('profile').userId;
        this.isLogin = true;

        getUserInfo(this.userId).then((res) => {
        // console.log(res);
          this.follows = res.profile.follows;
          this.followeds =  res.profile.followeds;
          this.level = res.level;
        });

        getUserMusicList(this.userId).then((res) => {
          // console.log(res);
          this.loveLength = res.playlist.length;
          this.playlist = res.playlist;
          // console.log(this.playlist);
          this.collection = this.playlist[0].trackCount;
        });
      }
     
      Bus.$on('editshow',(e) => {
        this.editShow = e;
        console.log(this.editShow);
      })
    },

    methods:{
      loginUser(){
        let cookie = this.$session.getItem("cookie");
        if(!cookie){
          this.$router.push('/login-user');
        }else{
          Toast.success('已经登录请不要重复登录');
        }
      },

      itemClick(index){
        this.currentIndex = index;
      },

      songlistClick(item,index){
        console.log(item);
        this.$router.push({path:'/songlist/' + item.id});
      },

      createList(){
        this.show = true;
      },
      popupCancel(){
        this.show = false;
      },

      createSongSheet(){
        let fileName = this.$refs.txtValue.value;
        console.log(fileName);
        getCreateList(fileName).then((res) => {
          console.log(res);
          this.show = false;
        })
        // console.log(fileName);
      },

      editClick(item){
        console.log(item);
        this.itemInfo = item;
        this.$session.setItem('itemInfo',this.itemInfo);
        this.editShow = true;
        this.listName = item.name;
        this.coverImage = item.coverImgUrl;
        // console.log(this.coverImage);
        // Bus.$emit('imageurl', this.coverImage);
        this.singName = item.name;
        // Bus.$emit('singname', this.singName);

        this.fileId = item.id;
      },

      onSelect(option){
        Toast(option.name)
        this.showShare = false;
      },

      editGroupList(){
        this.$router.push('/singSheet');
      },

      delGroupList(){
        // console.log(this.fileId);
        getDelList(this.fileId).then((res) => {
          console.log(res);
          this.editShow = false;
          getRefresh().then((res) => {
            console.log(res);
          })
        })
      },
    }
  }
</script>

<style scoped>
.user{
  position: relative;
  padding-bottom: 60px;
}

/* .content{
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0;
  right: 0;
  overflow: hidden;
} */

.user-nav{
  padding-top: 85px;
  text-align: center;
}

.user-nav img{
  position: absolute;
  top: 6%;
  left: 40%;
  width: 60px;
  height: 60px;
  border-radius: 100%;
  overflow: hidden;
  color: #f8dada;
  background-color: #f7f1f1;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 4px;
}

.user-login {
  height: 50px;
}

.user-login-title{
  font-weight: 600;
  padding-top: 20px;
}

.user-info{
  font-size: 13px;
  color: gainsboro;
}

.user-login,
.user-icon,
.my-love-song,
.songlist-content-title{
  background-color: #ffffff;
  box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  margin: 10px;
  padding: 10px;
}

.create-clist{
  display: flex;
  justify-content: space-between;
}

.create-list{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.my-love-song{
  display: flex;
  padding: 50px;
}

.my-love-song .love-img{
  color: #fc6464;
  width: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
}

.love-msg,
.create-msg{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 10px;
  font-size: 9px;
  color: #666666;
}

.create-list-left{
  display: flex;
}

.create-img img{
  width: 50px;
  height: 50px;
  padding: 10px;
  border-radius: 5px;
}

.love-title {
  font-size: 16px;
  margin-bottom: 5px;
}

.user-section-title {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 20px 10px;
}

.create-songlist,
.collection-songlist,
.assistant-songlist{
  min-height: 70px;
}

.collection-list{
  padding: 20px;
}

.songlist-content-title {
  font-size: 9px;
}

.assistant-songlist{
  padding-bottom: 30px;
}

.active{
  color: #fc6464;
}

.active span{
  border-bottom: 3px solid #fc6464;
}

.menu-list:hover{
  background: #ccc;
}

</style>